<template>
  <section class="page">
    <headerbar>{{title}}
      <span v-if="canEdit" @click="showMenu" class="head-btn-text" slot="btn">更多</span>
      <div v-if="isShowMenu" class="edit-menu-wrap" @click="hideMenu">
        <ul class="edit-menu">
          <li @click="editItem">编辑</li>
          <li @click="deleteItem">删除</li>
        </ul>
      </div>
    </headerbar>

    <section class="inner-content">
      <section class="detail">
        <h1 class="title text-center">{{data.title}}</h1>
        <div v-if="!data.externalUrl" class="cont-text" v-html="tools.resumeEnter(data.ext)">
        </div>
        <div v-if="data.externalUrl" @click="loadUrl(data.externalUrl)" class="cont-text text-center bold">查看外部资料>></div>
        <!--<p class="title" style="margin-top: 20px;">附件：</p>
        <div class="text-center no-data" v-if="!data.annexList || (data.annexList && data.annexList.length===0)">
          <img src="../../../../static/images/no_data.png" alt="">
          <p>暂无数据</p>
        </div>-->
        <!--<ul class="list-item mui-content-padded flex-justify-start" v-if="data.annexList && !data.externalUrl">
          <li class="enclosure-upload" v-for="item in data.annexList">
            <img v-if="isImage(item.fileName)" class="enclosure-upload-file" :src="tools.getImgUrl(item.fileId)" @click="showImagePreview(item)"/>
            <img v-if="!isImage(item.fileName)" class="enclosure-upload-file" src="../../../../static/images/up_document.png" @click="downLoadFile(item)" />
            <p class="mui-ellipsis">{{item.fileName}}</p>
          </li>
        </ul>-->
      </section>

    </section>

    <section class="inner-content pdv-3" v-if="data.annexList && data.annexList.length>0">
      <div class="pdv-4 pdh-5 title bold" style="font-size:15PX;">附件：</div>
      <ul class="list-file">
        <div v-for="item in data.annexList">
          <li class="item" v-if="!isImage(item.fileName)" @click="downLoadFile(item)">{{item.fileName}}</li>
          <li class="item" v-if="isImage(item.fileName)" @click="showImagePreview(item)">{{item.fileName}}</li>
        </div>
      </ul>
    </section>

    <section class="d-scroll-2head bg-white inner-content" :class="[{'d-scroll-3head': isInputFocus}]">
      <commentListComponent v-if="detail" :_contentId="detail.id" :shareType="shareType" @onInputFocus="onInputFocus"></commentListComponent>
    </section>

  </section>
</template>
<script>
  import api from '@/common/config/api'
  import commentListComponent from '@/components/common/commentListComponent'
  import moment from 'moment'
  export default {
    components: {commentListComponent},
    name: 'newTermReminderDetail',
    data () {
      return {
        data: {},
        id: '',
        index: 2,
        title: '支部空间',
        files: [],
        isShowMenu: false,
        fileNames: [],
        detail: false,
        shareType: 4,
        canEdit: false,
        isInputFocus: false,
      }
    },
    created () {
      this.id = this.$route.params.id
      this.index = this.$route.params.index
      // 来源（0 新闻 1 短视频 2 支部大事记 3 支部相册 4 学习体会 5 学习资料）
      if (this.index === '2') {
        this.title = '支部大事记'
        this.shareType = 2
      } else if (this.index === '3') {
        this.title = '支部相册'
      } else if (this.index === '4') {
        this.shareType = 4
        this.title = '学习体会'
      } else if (this.index === '5') {
        this.shareType = 5
        this.title = '学习资料'
      }
      this.loadData()
      this.saveSpaceInfoRead()
      // 用于留言列表获取数据判断
      this.$store.state.isSpace = true
    },
    beforeDestroy () {
      this.$store.state.isSpace = false
    },
    methods: {
      onInputFocus(blo) {
        this.isInputFocus = blo;
      },
      /*显示菜单*/
      showMenu () {
        this.isShowMenu = true
      },
      /*隐藏菜单*/
      hideMenu () {
        this.isShowMenu = false
      },
      /*编辑内容*/
      editItem () {
        this.hideMenu()
        this.$store.state.branchDetail = this.data
        let editRouteName = {
          '2': 'memorabiliasAdd', // 支部大事记详情
          '3': 'albumsAdd', // 支部相册详情
          '4': 'learningExperiencesAdd', // 学习体会详情
          '5': 'learningMaterialsesAdd' // 学习资料详情
        }
        this.$router.push({name: editRouteName[this.index], query: {id: this.$route.params.id}})
      },
      /*删除内容*/
      deleteItem () {
        this.hideMenu()
        let params = {
          loginId: this.tools.getUserInfo().id,
          spaceId: this.$route.params.id
        }
        this.tools.showLoading()
        this.fetchService.saveSpaceInfoDelSpaceInfo(params).then(res => {
          this.tools.hideLoading()
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.tools.tip('删除成功')
          setTimeout(() => {
            this.tools.back()
          }, 2000)
        })
      },
      loadData () {
        let data = {
          loginId: this.tools.getUserInfo().id || '112029',
          spaceId: this.id
        }
        this.fetchService.spaceInfoDetail(data).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.data = res.data
          this.detail = res.data
          this.$store.state.newsDetail = res.data
          this.canEdit = res.data.editPower || false
          // if (res.data.fileName && res.data.fileName !== '') {
          //   this.fileNames = res.data.fileName.split(',')
          // }
          // if (res.data.fileId && res.data.fileId !== '') {
          //   let files = res.data.fileId.split(',')
          //   files.map((v, index) => {
          //     let file = {}
          //     file.fileId = v
          //     if (this.fileNames[index] && this.fileNames[index] !== '') {
          //       file.fileName = this.fileNames[index]
          //     } else {
          //       file.fileName = '未知.temp'
          //     }
          //     this.files.push(file)
          //   })
          // }
        })
      },
      saveSpaceInfoRead () {
        let data = {
          loginId: '112029',
          spaceId: this.id
        }
        this.fetchService.saveSpaceInfoRead(data).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
        })
      },
      getTime (createTime) {
        return moment(createTime).format('YYYY年MM月DD日')
      },
      loadUrl (url) {
        window.android && window.android.openUrlAdapt && window.android.openUrlAdapt(url)
      },
      downLoadFile (item) {
        console.log("item={}", item)
        if(item.fileId && item.fileId.indexOf('/redCloudNewsDetail') !=-1){
          let newId = item.fileId.substring(item.fileId.lastIndexOf('/') + 1)
          let newType = item.fileId.substring(item.fileId.lastIndexOf('=') + 1)
          if (newType == 1) {//1 视频
            this.$store.state.isVideo = true
            this.getDetail(newId)
            return
          } else if (newType == 2) {//2 红云FM
            this.$store.state.isVideo = false
            this.getDetail(newId)
            return
          }
          this.$router.push({name: 'redCloudNewsDetail', params:{id: newId,title:'学习资料',isComment:false,isUpsComponent:false,allowProhibit:false}});
          return
        }
        let fileName = item.fileName
        let url = this.tools.getImgUrl(item.fileId)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(url, fileName)
        }
      },
      getDetail(id){
        this.fetchService.contentPageDetail(id).then(res => {
          if (res.code !== 0) {
            return false
          }
          this.$store.state.videoDetail = res.data.newsContent
          console.log('this.$store.state.videoDetail',this.$store.state.videoDetail);
          this.$router.push({
            name: `videoDetail`, params: {id: res.data.newsContent.id,isComment:false,isUpsComponent:false,allowProhibit:false}, query: {id: res.data.newsContent.id}
          });
        })

      },
      showImagePreview (item) {
        if (item.fileId.length < 1) {
          return false
        }
        let fileUrl = this.tools.getImgUrl( item.fileId)
        if(this.tools.indexOfHttp(item.fileUrl)){
          fileUrl = item.fileUrl
        }
        item.url = fileUrl
        let imgs = [fileUrl]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      }
    }
  }
</script>

<style scoped lang="scss">
.list-file {
  .item {
    word-break: break-all;
  }
}
  .enclosure-upload p {
    font-size:14PX;
  }
  .list-item {
    flex-wrap:wrap;
    .enclosure-upload {
      width:33%;
      margin-right:.5%;
      margin-bottom:.5%;
      flex-shrink:0;
      &:nth-child(3n + 3) {
        margin-right:0
      }
      img {
        width:100% !important;
        min-height: 50px;
        height:auto !important;
      }
    }
  }
</style>
